<template>
    <div class="page">
        <div class="breadcrumbBar">
            <el-breadcrumb separator="/"> 
                <el-breadcrumb-item>基础数据</el-breadcrumb-item>
                <el-breadcrumb-item>采集终端</el-breadcrumb-item>
            </el-breadcrumb> 
        </div>
        <div class="tableCard">
            <div class="tabToolbar">
                <div class="title">采集终端</div>
                <div class="filters"></div>                
                <div class="actions">
                    <el-space wrap>
                        <el-button @click="refresh" type="primary" plain><i class="fa fa-refresh btnicon"></i> 刷新</el-button> 
                        <el-button @click="acShowEdit( 0  )" type="primary" plain><i class="fa fa-plus btnicon"></i> 新建系统</el-button>  
                    </el-space>
                </div>
            </div>
            <div class="tabContainer">
                <div class="tab_details">
                    <div class="tabPan">
                        <el-table :data="tabDatas" stripe style="width: 100%">
                            <el-table-column prop="terId" label="ID" width="70" />
                            <el-table-column prop="terCode" label="编号" width="120" />
                            <el-table-column prop="terName" label="名称" width="220" />    
                            <el-table-column prop="terDesc" label="备注" />
                            <el-table-column  label="操作" width="240">
                                <template #default="scope">
                                    <el-space wrap>
                                        <el-button link type="primary" size="small" @click.prevent="acShowEdit(scope.row.terId ,scope.row)">
                                            修改
                                        </el-button> 
                                        <el-button link type="danger" size="small" @click.prevent="acDelete(scope.row)">
                                            删除
                                        </el-button>  
                                    </el-space>
                                </template>

                            </el-table-column>
                        </el-table> 
                    </div> 
                </div>
            </div>
        </div>

        <el-dialog
            v-model="editDlg.status"
            title="采集终端"
            width="500"
            draggable
            overflow
            :close-on-click-modal="false"
        >
            <div class="editForm">
                <div class="edRow">
                    <div class="lab">编号</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.terCode"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">名称</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.terName"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">业务系统</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.sysId" >
                            <el-option v-for="item in dicts.syses" :key="item.sysId" :label="item.sysName" :value="item.sysId" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">数据服务器</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.datasvrId" >
                            <el-option v-for="item in dicts.datasvrs" :key="item.datasvrId" :label="item.datasvrName" :value="item.datasvrId" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">通信服务器</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.mqsvrId" >
                            <el-option v-for="item in dicts.mqsvrs" :key="item.mqsvrId" :label="item.mqsvrName" :value="item.mqsvrId" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">远程参数</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.sslInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">扩展属性</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.exInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">备注</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.terDesc"></el-input>
                    </div>
                </div>
                
                <div class="edBtnRow">
                    <el-button type="default" @click="editDlg.status=false"><i class="fa fa-reply btnicon"></i> 取消</el-button>
                    <el-button type="primary" @click="acPost"><i class="fa fa-save btnicon"></i> 保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {admin} from '../../admin';
    import { ElMessage, ElMessageBox } from 'element-plus';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return { 
                pageState:{},
                pageStateKey : "zn_admin_collecting_ter",
                dicts:{ 
                    syses:[],
                    datasvrs:[],
                    mqsvrs:[]
                },
                tabDatas:[],
                editDlg:{
                    status: false  ,
                    info:{},
                    rowId : 0 
                }
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        var dataKey = "admin/collecting/ter/dict.txt";
                        var ps = {};
                        admin.api.query(dataKey , ps).then(_res=>{ 
                            me.dicts.syses = _res.datasetList[0];
                            me.dicts.datasvrs = _res.datasetList[1];
                            me.dicts.mqsvrs = _res.datasetList[2];
                            console.log(me.dicts)
                            su();
                        }) ; 
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    var dataKey = "admin/collecting/ter/list.txt";
                    var ps = {};
                    admin.api.query(dataKey , ps).then(_res=>{ 
                        me.tabDatas = _res.recordset;
                        console.log('ter' , me.tabDatas)
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            acShowEdit(rowId,row){
                var me = this;
                try {
                    me.editDlg.rowId = rowId;
                    me.editDlg.info = rowId == 0 ? {
                        terCode:"", 
                        terName:"",
                        terDesc:"",
                        sysId:0 ,
                        datasvrId :0 ,
                        mqsvrId:0,
                        sslInfo:"{}",
                        exInfo:"{}"
                    }: row;
                    me.editDlg.status = true; 
                    console.log(me.editDlg)
                } catch (error) {
                    console.log(error)
                }
            },
            acPost(){
                var me = this;
                try {
                    var ps = {};
                    if( me.editDlg.rowId >0  ){
                        ps = JSON.parse(JSON.stringify(me.editDlg.info))
                        delete ps['terId']
                        admin.api.updateRow( "T_Ter" , ps , {terId: me.editDlg.info.terId}).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    else{
                        ps = me.editDlg.info;
                        admin.api.createRow( "T_Ter" , ps  ).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    
                } catch (error) {
                    console.log(error)
                }
            },
            acDelete(row){
                var me = this;
                try {
                    var msg = "是否确定要删除当前采集终端？";
                    ElMessageBox.confirm(
                        msg,
                        '删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => { 
                        var ps = {
                            terId : row.terId 
                        };
                        admin.api.deleteRow( "T_Ter" ,ps ).then(_=>{
                            me.refresh();
                        })
                    }).catch(() => { 
                    })
                } catch (error) {
                    console.log(error)
                }
            }, 
        }
    }
</script>

<style lang="less" scoped>
@import url('../../admin.less');

</style>